<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>骑行</title>
</head>
<body class="fdcolum">
    <header class="df">
        <!-- 动态封装 -->
    </header>
    <main class="flex overflow fdcolum rel">
        <div class="mainM abs">
            <div class="totalDistance">
                <p class="font16 runDistance">目前累计骑行距离</p>
                <p><span id="runNum">999.99</span>公里</p>
            </div>
            <div class="map info abs">
                <p id="GoBtn" class="rel">GO</p>
                <div class="set rel">
                    <div class="shezhi abs"><i class="iconfont icon-shezhi"></i></div>
                    <div class="yinyue abs"><i class="iconfont icon-yinle"></i></div>
                </div>
            </div>
        </div>

        <!-- 地图 -->
        <div id="map-container">
        </div>
        <div class="totalRoute rel">
            <p class="font18 run-path">骑行路线</p>
            <p class="route font14">使用骑行路线，邂逅附近的同行者</p>
            <i class="iconfont icon-xiayiye abs"></i>
        </div>
    </main>
    <!-- 模态框 倒计时 -->
    <div class="background abs">
        <div id="countDown" class="countDown abs">3</div>
    </div>

    <!-- 尾部动态 -->

    <!-- 百度地图 -->
    <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=OLPxF0FcrSQEWIOgG2YS0fE2u4FiLox8"></script>
</body>
</html>